<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <!--yjquery显示 隐藏-->
    <title>jq常见的效果</title>
    <script src="/jquery-3.2.1.js"></script>
    <script type="text/javascript"> 
        $(document).ready(function () {
            $("button:eq(0)").click(function () {
                $("div").show();
            });
            $("button:eq(1)").click(function () {
                $("div").hide();
            });
            $("button:eq(2)").click(function () {
                $("div").toggle();
            });
            $("button:eq(3)").click(function () {
                $("div").show(1000);
            });
            $("button:eq(4)").click(function () {
                $("div").hide(1000);
            });
            $("button:eq(5)").click(function () {
                $("div").toggle(1000);
            });
        });
    </script>
</head>
<body>
<button>立即显示</button>
<button>立即隐藏</button>
<button>立即切换</button>
<button>延时显示</button>
<button>延时隐藏</button>
<button>延时切换</button>
<div style="background-color: #6b9cde">
    用于演示的div
</div>

</body>
</html>